import { useCallback } from 'react';
import { StyleSheet, Text, View, useWindowDimensions, Platform, Pressable } from 'react-native';
import { ModalProps, ModalComponentWithOptions } from 'react-native-modalfy';
import { Shadow } from 'react-native-shadow-2';

import { ModalName } from '@components/modalConfig';
import FastImage from '@d11/react-native-fast-image';

import { pxToVh, pxToVw } from '@/utils/pxToVx';

export interface TopicExitModalProps {
  onLeave: () => void;
}

const TopicExitModal: ModalComponentWithOptions<ModalProps<ModalName>> = ({ modal: { closeModal, params } }) => {
  const { width } = useWindowDimensions();
  const size = Platform.OS === 'web' ? Math.max(width * 0.3, 320) : width * 0.85;

  const handleCloseModal = useCallback(
    () => closeModal(undefined, () => console.log('✅  Closed latest opened modal')),
    [closeModal],
  );

  return (
    <View style={[styles.wrapper, { width: size }]}>
      <View style={styles.modalView}>
        <FastImage source={require('@images/details/icon_alert.png')} style={styles.alertIcon} />
        <Text style={styles.modalTitle}>Exit course?</Text>
        <Text style={styles.modalDescription}>{'Your progress will be saved after you exit the course'}</Text>
        <View style={styles.modalButtons}>
          <Pressable onPress={handleCloseModal}>
            <Shadow
              style={[styles.button, styles.buttonClose]}
              startColor="rgba(0, 0, 0, 0.2)"
              offset={[0, 3]}
              distance={1}
            >
              <Text style={styles.confirmTextStyle}>Continue Call</Text>
            </Shadow>
          </Pressable>
          <Pressable style={styles.button} onPress={params?.onLeave}>
            <Text style={styles.cancelTextStyle}>Leave Course</Text>
          </Pressable>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    // padding: 20,
    borderRadius: 20,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    height: 382,
  },

  modalView: {
    borderRadius: pxToVh(20),
    paddingHorizontal: pxToVw(44),
    alignItems: 'center',
    paddingTop: pxToVh(53),
    paddingBottom: pxToVh(36),
  },
  alertIcon: {
    width: pxToVw(69),
    height: pxToVw(74),
  },
  modalButtons: {
    width: '100%',
    rowGap: pxToVw(12),
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonClose: {
    width: '100%',
    height: pxToVh(46),
    borderRadius: pxToVh(46 / 2),
    backgroundColor: 'rgba(1, 179, 254, 1)',
  },
  confirmTextStyle: {
    fontSize: pxToVh(15),
    lineHeight: pxToVh(16),
    fontWeight: '600',
    color: '#fff',
  },
  cancelTextStyle: {
    fontSize: pxToVh(15),
    lineHeight: pxToVh(16),
    fontWeight: '600',
    color: '#01B3FE',
  },
  modalTitle: {
    textAlign: 'center',
    fontSize: pxToVh(20),
    lineHeight: pxToVh(23),
    fontWeight: '600',
    color: 'rgba(0, 0, 0, 0.9)',
    marginTop: pxToVh(6),
  },
  modalDescription: {
    paddingHorizontal: pxToVw(20),
    textAlign: 'center',
    fontSize: pxToVh(16),
    lineHeight: pxToVh(22),
    color: 'rgba(0, 0, 0, 0.6)',
    marginVertical: pxToVh(36),
  },
});

export default TopicExitModal;
